import type { Options } from 'sortablejs';
import type { Ref } from 'vue';
import { nextTick, unref } from 'vue';

/**
 * @description dom排序设置性格
 * @author wfd
 * @date 2022/11/14 20:18
 * @example  useSortable(el, {     draggable: '.is-closable', });
 * @param {HTMLElement | Ref<HTMLElement>} el
 * @param {Sortable.Options} options
 * @returns {{initSortable: () => void}}
 */
export function useSortable (el: HTMLElement | Ref<HTMLElement>, options?: Options) {
  function initSortable () {
    nextTick(async() => {
      if (!el) return;
      
      const Sortable = (await import('sortablejs')).default;
      Sortable.create(unref(el), {
        animation: 500,
        delay: 400,
        delayOnTouchOnly: true,
        ...options
      });
    });
  }
  
  return { initSortable };
}
